<template>
  <div>
    <el-select v-model="productName" value-key="id" clearable placeholder="商品" filterable :filter-method="queryProduct"
      @change="changeProduct" style="width: 100%">
      <el-option v-for="item in productOptions" :key="item.id" style="width:650px" :label="item.name" :value="item">
        <div style="display: flex">
          <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
          <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{ item.name }}</span>
          <div style="width: 200px;">
            <span style="color: #8492a6; font-size: 8px;">{{item.spec1}}</span>
          </div>
        </div>
      </el-option>
      <div style="display: flex;width: 100%;position: absolute;bottom: 0">
        <div style="width: 50%;background-color: rgb(248,248,248);"></div>
        <div class="elOption" @click="toAddProduct">搜索商品</div>
      </div>
      <div style="height: 30px"></div>
    </el-select>
    <el-dialog title="查找商品" :visible.sync="orderVisible" width="950px" v-el-drag-dialog :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    list as productList
  } from '@/api/product'
  import productTable from '@/components/ProductList/productList'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  export default{
    props: [
      "proname"
    ],
    data(){
      return{
          productName: '',
          productOptions:[],
          query:{
            productId:'',
            proname:""
          },
          orderVisible: false,
      }
    },
    directives: {
      elDragDialog
    },
    components:{

      productTable
    },
    created() {
        if(!utils.isNull(this.proname)){
          this.productName=this.proname
        }
      var _this = this
      _this.queryProduct('')
    },
    methods:{
      queryProduct(query) { // 查询商品
        this.productOptions = []
        productList({
          keyword: query
        }).then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.productOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      changeProduct(data) {
        if (!utils.isNull(data)) {
          console.log(data)
          this.productName = data.name
          this.query.productId = data.id
          this.query.proname = data.name
        } else {
          this.query.productId = ''
        }
        this.$emit('queryProductClick',this.query)
      },
      toAddProduct() {
        this.orderVisible = true;
      },
      orderClose() {
        this.orderVisible = false;
      },
      addProductClick(data) {
        console.log(data);
        if (data.length > 1) {
          this.productName = data[0].name
          this.query.productId = data[0].id
          this.orderVisible = false;
          this.$message({
            message: '只能查询一个商品',
            offset: 120,
            center: true
          })
        } else {
          this.productName = data[0].name
          this.query.productId = data[0].id
          this.orderVisible = false;
        }
        this.$emit('queryProductClick',this.query)
      },
      doubleClick(val) {
        this.productName = val.name
        this.query.productId = val.id
        this.orderVisible = false;
        this.$emit('queryProductClick',this.query)
      },
    }
  }
</script>

<style>
  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
</style>
